<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery Finder</title>
<link rel="stylesheet" href="ui.finder-2.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="ui.theme.css" type="text/css" media="screen" title="no title" charset="utf-8">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript" src="jquery.scrollTo-1.4.0-min.js"></script>
<script src="ui-finder.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
	$(function() {
		function simple() {
			window.f = new Finder($('#finder')).init();
		}	
		
		function withScroll() {
			
			$('#finder').finder({
				paging: true,
				cache: false,
				animate: 500,
				scroll_check_data: function(cycle,data) {
					var r = Math.floor( Math.random() * 4 )
					if(r == 2) {return false}
				}
			})
			
		/*	window.f = new Finder($('#finder'),{
				paging: true,
				scroll_check_data: function(cycle,data) {
					var r = Math.floor( Math.random() * 4 )
					if(r == 2) {return false}
				}*/
			/*	
				scroll_placeholder: function(cycle) {
					return '<p class="loading">Loading data...</p>'
				},
				scroll_set_page_url: function(cycle) {
					var page = cycle.data.target.data('paging') || 0;
					page += 10;
					cycle.data.target.data('paging',page);

					return (cycle.url.match(/(\&get\=\d+)/))
					 				? cycle.url.replace(/(\&get\=\d+)/,'$1&page='+page)
									: cycle.url + '?page='+page;
				},*/
		
			//}).init();
		}
		
		function fromJson() {
			
			$('<ol/>').insertBefore('#finder').finder({
				root_url: 'http://api.flickr.com/services/feeds/photos_public.gne?format=json&jsoncallback=?',
				ajax: {
					dataType: 'json'
				},
				paging:false,
			//	paging:true,
				//max_column_width: 200,
				onItemSelect: function() {
				//	return true
				},
				beforeProcess: function(cycle){
					var self = this,
						d = cycle.data.raw;
				//	console.error(cycle)
					
					if(d && d.items){			
				
						var r = [];
						$.each(d.items,function(i,item) {
							r.push('<li><a>'+item.title+'</a>\
								<p class="ui-finder-contents"><img src="'+item.media.m+'"></p>\
							</li>')
						});
												
						cycle.data.processed = $('<div/>').append('<p>'+cycle.id+'</p><ol>'+r.join('')+'</ol>');
						
						self.method('addMoreLink',cycle.data.processed)
					}
				},
				addMoreLink: function(column) {
					var self = this;

					$('<a href="#load-more">More</a>')
						.appendTo(column)
						.click(function(e) {
							$(this).remove();
							self.cycle('extend')
									.set({
										url: self.settings.root_url ,
										event: e,
										elements: {
											column: column
										},
										data: {
											target: column
										}												
									}).start();

							return false;
						});
				},
				afterDisplay: function(cycle){
				
				}
			}).init();
		};
		fromJson()
		withScroll();
		
	})
	
	window.test2 = function(i) {
		var finder = $('#finder'),	
			urls = [
				'html/level2.html',
				'html/level3.html?nicolas',
				'html/level4.html',
				'html/level5.html?33',
				'html/somefile.html?0939fjkl.jpg'
			];

	//	f.select(urls);
		
	//	flick.select([0,10,15])
		
		finder.finder('select',urls);
	}

</script>
<style type="text/css">
body{font:0.8em Helvetica,Verdana,Arial,sans-serif;;}
</style>
</head>
<body>
	<ol id="finder">
		<li class="ui-finder-file"><a href="html/somefile.html?0.jpg" title="some title for this image">Lorem ipsum dolor sit amet</a></li>
		<li class="ui-finder-file"><a href="html/somefile.html?1">Consectetur adipiscing elit</a></li>
		<li><a>Nam auctor, lectus vulputate</a>
			<!-- When sublevels are specified in source, like in this item,
					you don't have to specify if each item is a file or folder.
				Also, you don't have to specify a URL for the anchor element
				but THE ANCHOR ELEMENT IS STILL REQUIRED
			 -->
			<ul>
				<li><a>Some fileasd asd asdasd a</a></li>
				<li><a href="html/somefile.html?4324432428.jpg">Some Imaged asd as</a></li>
				<li><a>Some Folder</a>
					<ul>
						<li><a href="html/somefile.html?7321343">Some fileasd asd asdasd a</a></li>
						<li><a href="html/somefile.html?433123248.jpg">Some Imaged asd as</a></li>
						<li><a href="html/level4.html?fsdfs">Some file</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li class="ui-finder-file"><a href="html/somefile.html?2">Consequat luctus</a></li>
		<li class="ui-finder-file"><a href="html/somefile.html?3">Nisl enim eleifend sem</a></li>
		<li class="ui-finder-folder"><a href="html/level2.html">Nam auctor, lectus vulputate</a></li>	
	</ol>
	<hr>
</body>
</html>